<template>
  <div class="feature-out">
    <div ref="searchDiv">
      <div class="filter-container">
        <el-input
          v-model="listQuery.code"
          size="small"
          placeholder="特征编码"
          clearable
          style="width:195px;"
        ></el-input>
        <el-button
          @click="handleFilter"
          size="small"
          type="primary"
          ref="btnQuery"
        >
          查询
        </el-button>
        <el-button
          @click="handleReset"
          size="small"
          type="primary"
          ref="btnRefresh"
        >
          重置
        </el-button>
      </div>
      <div style="display: flex;justify-content: flex-end;margin-bottom: 12px;">
        <el-button type="primary" size="small" @click="showDialog('create')">
          新增特征
        </el-button>
        <el-button type="primary" size="small" @click="featureUpload('true')">
          导入特征
        </el-button>
        <el-button type="primary" size="small" @click="download">
          导出特征
        </el-button>
      </div>
    </div>
    <div class="selectionTitle">
      <el-link type="primary" :underline="false">
        <i class="el-icon-info"></i>
      </el-link>
      {{ '已选择' }}
      <span class="titleColor">
        {{ downAll ? total : this.multipleSelection.length }}
      </span>
      {{ '条特征数据' }}
      <el-button @click="handleAll()" type="text" size="mini">
        {{ '勾选全部' + total + '条数据' }}
      </el-button>
    </div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      border
      fit
      highlight-current-row
      :max-height="tableHeight"
      @selection-change="handleSelectionChange"
      style="width: 100%;margin-bottom: 12px;"
    >
      <el-table-column type="selection" align="center" width="55">
      </el-table-column>
      <el-table-column
        label="特征编码"
        min-width="130px"
        prop="feature_code"
        align="center"
      />
      <el-table-column
        label="特征描述"
        min-width="160px"
        prop="feature_desc"
        align="center"
      />
      <el-table-column
        label="特征值类型"
        width="120px"
        prop="feature_type"
        align="center"
      />
      <el-table-column
        label="创建时间"
        prop="feature_create_at"
        align="center"
        width="200px"
      />
      <el-table-column
        label="更新时间"
        prop="feature_update_at"
        align="center"
        width="200px"
      />

      <el-table-column fixed="right" label="操作" align="center" width="160px">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="handleDetail(scope.row)">
            编辑
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="getrefFiles(scope.row.feature_id)"
          >
            引用情况
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="deleteFeature(scope.row.feature_id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="listQuery.current_page"
      :page-sizes="[10, 20, 50]"
      :page-size="listQuery.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
    <el-dialog
      :modal-append-to-body="false"
      :title="formTitle"
      :visible.sync="formVisible"
      :close-on-click-modal="false"
      width="70%"
    >
      <el-form
        class="small-space"
        :model.sync="createdItem"
        :rules="rules"
        ref="featureForm"
        label-position="right"
        label-width="84px"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="feature_code" label="特征编码">
              <el-input
                size="small"
                v-model="createdItem.feature_code"
                placeholder="请填写特征编码"
                @change="delKong('feature_code')"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="feature_desc" label="特征描述">
              <el-input
                size="small"
                v-model="createdItem.feature_desc"
                placeholder="请填写特征描述"
                maxlength="100"
                @change="delKong('feature_desc')"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="feature_type" label="返回类型">
              <el-select
                v-model="createdItem.feature_type"
                placeholder="请选择返回类型"
                size="small"
                style="width: 100%"
              >
                <el-option
                  v-for="item in return_type"
                  :key="item.code"
                  :label="item.value"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12"></el-col>
        </el-row>
        <div style="margin-bottom: 8px">
          <span style="font-size: 18px;color: #303133;">计算逻辑</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="feature_data_source" label="数据源">
              <el-select
                size="small"
                v-model="createdItem.feature_data_source"
                placeholder="请选择数据源名称"
                style="width: 100%"
              >
                <el-option
                  v-for="item in feature_data_source"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="feature_db" label="数据库">
              <el-select
                v-model="createdItem.feature_db"
                placeholder="请选择数据库"
                size="small"
                style="width: 100%"
              >
                <el-option
                  v-for="item in feature_db"
                  :key="item.code"
                  :label="item.value"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="feature_table" label="查询表">
              <el-input
                size="small"
                v-model="createdItem.feature_table"
                placeholder="请填写查询表"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="feature_retval_fail" label="拉取异常值">
              <el-input
                size="small"
                v-model="createdItem.feature_retval_fail"
                @change="delKong('feature_retval_fail')"
                placeholder="请填写拉取外部数据失败返回值,不填则使用默认值"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="feature_retval_empty" label="缺失默认值">
              <el-input
                size="small"
                v-model="createdItem.feature_retval_empty"
                placeholder="请填写特征结果空返回值,不填则使用默认值"
                @change="delKong('feature_retval_empty')"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="feature_sql" label="详细sql">
              <el-input
                style="display: none"
                v-model="createdItem.feature_sql"
                type="textarea"
              ></el-input>
              <div class="code">
                <codemirror
                  ref="cmRef"
                  v-model="createdItem.feature_sql"
                  :options="cmOptions"
                  @changes="format(createdItem.feature_sql)"
                ></codemirror>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="依赖参数">
              <!-- <el-input
                size="small"
                v-model="createdItem.params"
                placeholder="请填写测试特征时使用的参数值例:{individualId}:12,{applyRiskId}:2"
              ></el-input> -->
              <el-table :data="paramsData" style="width: 100%">
                <el-table-column prop="key" label="参数"></el-table-column>
                <el-table-column prop="value" label="输入值" width="120">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.value"
                      @change="paramsChange(scope.row)"
                    ></el-input>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="测试结果">
              <el-input
                size="small"
                type="textarea"
                rows="1"
                :disabled="true"
                v-model="createdItem.testResult"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="特征测试">
              <el-button
                type="primary"
                :disabled="
                  createdItem.feature_retval_fail === '' ||
                  createdItem.feature_code === '' ||
                  createdItem.feature_desc === '' ||
                  createdItem.feature_type === '' ||
                  createdItem.feature_data_source === '' ||
                  createdItem.feature_db === '' ||
                  createdItem.feature_table === '' ||
                  createdItem.feature_sql === ''
                    ? true
                    : false
                "
                :loading="isTesting"
                @click="doTestFeature"
              >
                试运行特征
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="cancel">取 消</el-button>
        <el-button
          size="small"
          type="primary"
          :loading="saveLoading"
          @click="save"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      :modal-append-to-body="false"
      title="引用情况"
      :close-on-click-modal="false"
      :visible.sync="statistics"
    >
      <el-form
        class="small-space"
        :model="refsList"
        label-position="right"
        label-width="100px"
      >
        <el-form-item label="特征编码">
          <el-input
            size="small"
            v-model="refsList.feature_code"
            placeholder
          ></el-input>
        </el-form-item>
        <el-form-item label="特征描述">
          <el-input
            size="small"
            v-model="refsList.feature_desc"
            placeholder
          ></el-input>
        </el-form-item>
        <el-form-item label="引用情况">
          <el-table :data="refsList.refs_list" border style="width: 100%">
            <el-table-column prop="project" label="项目" width="120">
            </el-table-column>
            <el-table-column prop="path" label="文件路径"></el-table-column>
            <el-table-column prop="type" label="文件类型"></el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 批量导入弹框 -->
    <el-dialog
      title="导入特征"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :visible.sync="upload"
      width="476px"
    >
      <el-form label-width="80px">
        <el-form-item label="特征文件:">
          <el-upload
            ref="upload"
            :action="uploadURL"
            :show-file-list="true"
            :multiple="false"
            :auto-upload="false"
            :file-list="fileList"
            :on-success="uploadSuccess"
            :accept="fileTypes"
            :on-change="uploadChange"
            :on-remove="handleRemove"
          >
            <el-button size="mini">
              <i class="el-icon-upload2"></i>
              点击上传
            </el-button>
            <div class="el-upload__tip" slot="tip">
              支持扩展名： xls、xlsx, 点击下载
              <el-button @click="downloadUrl" type="text" size="mini">
                示例文件
              </el-button>
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="featureUpload('false')">取消</el-button>
        <el-button size="mini" type="primary" @click="submitUpload">
          导入
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import { Form, Table, Upload } from 'element-ui'
import { parseTimeJS } from '@/utils'
import { Message } from 'element-ui'
import { debounce } from 'lodash'
import { codemirror } from 'vue-codemirror'
import 'codemirror/mode/sql/sql.js'
import 'codemirror/theme/ayu-dark.css'
import 'codemirror/theme/erlang-dark.css'
// import sqlFormatter from 'sql-formatter'
import {
  getFeatureList,
  getDatasource,
  getUp,
  getrefFiles,
  test,
  uploadURL,
  downloadURL,
  listDownload,
  del
} from '@/api/risksystem/feature/index'

interface ListQuery {
  [propName: string]: any
}
const defaultQuery = {
  feature_code: '',
  feature_desc: '',
  feature_type: '',
  feature_data_source: '',
  feature_db: '',
  feature_table: '',
  feature_sql: '',
  feature_retval_fail: -99998,
  feature_retval_empty: -99999,
  params: '',
  testResult: '',
  feature_status: ''
}
@Component({
  name: 'accountDetail',
  components: {
    //引用的组件在这里声明
    codemirror
  }
})
export default class extends Vue {
  // 文件上传
  get uploadURL() {
    return uploadURL
  }
  // 文件下载
  get downloadURL() {
    return downloadURL
  }
  // 公共查询对象
  private defaultQuery = {
    // 分页对象
    limit: 10,
    current_page: 1,
    code: null
  }
  private listQuery: ListQuery = {
    // 分页对象
    limit: 10,
    current_page: 1,
    code: null
  }
  private feature: Function = (rule: any, value: any, callback: Function) => {
    let reg = /^[a-zA-Z0-9_]{1,50}$/
    if (reg.test(value) === false) {
      callback(new Error('仅限英文、数字及下划线且低于50个字符'))
    } else {
      callback()
    }
  }
  private feature_retval: Function = (
    rule: any,
    value: any,
    callback: Function
  ) => {
    let reg = /^[0-9-]{1,10}$/

    if (reg.test(value) === false) {
      callback(new Error('仅限正负整数且低于10个字符'))
    } else {
      callback()
    }
  }
  private cmOptions: any = {
    mode: 'text/x-mariadb',
    indentWithTabs: true,
    smartIndent: true,
    lineNumbers: true,
    lineWrapping: true,
    matchBrackets: true,
    theme: 'erlang-dark',
    styleActiveLine: true,
    cursorHeight: 1, // 光标高度
    autoRefresh: true
  }
  private saveLoading: any = false
  private total = 0
  private tableHeight: any = null
  private tableData = []
  private tableLoading = true
  private title = '特征库'
  private upload = false
  private fileTypes = '.xls,.xlsx' //上传文件类型
  private fileList: any = []
  private files: any = []
  private multipleSelection: any = []
  private downloadData: any = []
  private downAll: any = false
  private paramsData: any = [{ key: 'applyRiskId', value: '' }]
  private feature_status = [
    {
      code: '0',
      value: '开启'
    },
    {
      code: '1',
      value: '关闭'
    }
  ]
  private return_type = [
    {
      code: 'String',
      value: 'String'
    },
    {
      code: 'Integer',
      value: 'Integer'
    },
    {
      code: 'Double',
      value: 'Double'
    },
    {
      code: 'Float',
      value: 'Float'
    },
    {
      code: 'BigDecimal',
      value: 'BigDecimal'
    },
    {
      code: 'List',
      value: 'List'
    }
  ]
  private feature_db = [
    {
      code: 'db_risk',
      value: 'db_risk'
    },
    {
      code: 'db_risk_data',
      value: 'db_risk_data'
    }
  ]
  private feature_data_source = []
  private createdItem: any = Object.assign({}, defaultQuery)
  private createdDate: any = this.createdItem
  private rules: any = {
    feature_code: [
      { required: true, message: '请填写特征编码', trigger: 'blur' },
      { validator: this.feature, trigger: 'blur' }
    ],
    feature_desc: [
      { required: true, message: '请填写特征描述', trigger: 'blur' }
    ],
    feature_type: [
      { required: true, message: '请选择返回类型', trigger: 'change' }
    ],
    feature_data_source: [
      { required: true, message: '请选择数据源名称', trigger: 'change' }
    ],
    feature_db: [
      {
        required: true,
        message: '请选择数据库',
        trigger: 'change'
      }
    ],
    feature_table: [
      { required: true, message: '请填写查询表', trigger: 'blur' }
    ],
    feature_sql: [
      { required: true, message: '请填写详细的sql语句', trigger: 'blur' }
    ],
    feature_retval_fail: [
      { required: true, message: '请填写查询表', trigger: 'blur' },
      { validator: this.feature_retval, trigger: 'blur' }
    ],
    feature_retval_empty: [
      { required: true, message: '请填写查询表', trigger: 'blur' },
      { validator: this.feature_retval, trigger: 'blur' }
    ]
  }
  private messageTitle: any = []
  private formVisible = false
  private statistics = false
  private isTesting = false
  private formTitle = ''
  private refsList = {}

  created() {
    this.getList()
    this.getDatasource()
  }
  mounted() {
    this.init()
  }
  beforeDestroy() {
    // 摧毁监听事件
    window.onresize = null
  }
  // 表格高度
  private init() {
    var _this = this
    this.$nextTick(() => {
      this.tableHeight =
        window.innerHeight - (this.$refs.searchDiv as any).offsetHeight - 300
    })
    window.onresize = () => {
      this.$nextTick(() => {
        this.tableHeight =
          window.innerHeight - (this.$refs.searchDiv as any).offsetHeight - 300
      })
    }
  }
  /*代码格式化*/
  private format() {
    /*获取文本编辑器内容*/
    /*将sql内容进行格式后放入编辑器中*/
    this.paramsData = []
    var array: any = []
    var paramsArr: any = ['applyRiskId']
    if (
      this.createdItem.feature_sql !== '' &&
      this.createdItem.feature_sql.match(/\{(.+?)\}/g)
    ) {
      this.createdItem.feature_sql.match(/\{(.+?)\}/g).forEach((item: any) => {
        paramsArr.push(item.match(/{(\S*)}/)[1])
      })
    }
    for (var i = 0; i < paramsArr.length; i++) {
      if (array.indexOf(paramsArr[i]) === -1) {
        array.push(paramsArr[i])
      }
    }
    array.forEach((item: any) => {
      this.paramsData.push({ key: item, value: '' })
    })
    // this.createdItem.feature_sql = sqlFormatter.format(
    //   this.createdItem.feature_sql
    // )
  }
  private delKong(val: any) {
    this.$set(this.createdItem, val, this.createdItem[val].replace(/\s+/g, ''))
  }
  private paramsChange(val: any) {
    var parmArr: any = []
    this.paramsData.forEach((item: any) => {
      if (item.value !== '') {
        parmArr.push('{' + item.key + '}:' + item.value)
        console.log(parmArr)
      }
    })
  }
  // 弹框取消
  private cancel() {
    this.isTesting = false
    this.formVisible = false
    this.saveLoading = false
  }
  // 列表数据
  private async getList() {
    this.tableLoading = true
    const { data } = await getFeatureList(this.listQuery)
    this.tableData = data.list
    this.total = Number(data.total)
    this.tableLoading = false
  }
  // 数据字典
  private async getDatasource() {
    const { data } = await getDatasource()
    this.feature_data_source = data
  }
  // 保存特征-验证
  private save() {
    ;(this.$refs['featureForm'] as Form).validate(async valid => {
      if (valid) {
        this.saveLoading = true
        this.getList()
        this.getUp()
      }
    })
  }
  // 删除
  private async deleteFeature(val: any) {
    this.$confirm('确认删除当前特征？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
        del({ feature_id: val }).then((data: any) => {
          if (data.code === 0) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getList()
          }
        })
      })
      .catch(() => {})
  }
  // 保存接口调用
  private async getUp() {
    // const dataUp: any = await getUp(this.createdItem)
    // if (dataUp.code === 0) {
    //   this.getList()
    //   this.formVisible = false
    //   this.isTesting = false
    //   this.$message.success('编辑成功！')
    //   // this.saveLoading = false
    // } else {
    //   this.isTesting = false
    //   this.formVisible = false
    //   this.$message.error(dataUp.msg)
    // }
    try {
      const { data } = await getUp(this.createdItem)
      this.getList()
      this.formVisible = false
      this.$message.success('编辑成功！')
    } catch (error) {
      console.log(error)
    } finally {
      this.isTesting = false
      this.saveLoading = false
    }
  }
  private async getrefFiles(id: any) {
    this.statistics = true
    const { data } = await getrefFiles({ feature_id: id })
    this.refsList = data
  }
  // 查询
  private handleFilter() {
    this.listQuery.current_page = 1
    this.getList()
  }
  private handleReset() {
    this.listQuery = Object.assign({}, this.defaultQuery)
    this.getList()
  }
  private handleSizeChange(val: any) {
    this.listQuery.limit = val
    this.getList()
  }
  private handleCurrentChange(val: any) {
    this.listQuery.current_page = val
    this.getList()
  }
  // 编辑
  private handleDetail(row: any) {
    this.formVisible = true
    this.formTitle = '编辑特征'
    this.createdItem = Object.assign({}, defaultQuery, row)
    this.$nextTick(() => {
      this.format()
      ;(this.$refs['featureForm'] as Form).clearValidate()
    })
  }
  // 新增弹框
  private showDialog() {
    this.formVisible = true
    this.createdItem = Object.assign({}, defaultQuery)
    this.formTitle = '新增特征'
    this.$nextTick(() => {
      this.format()
      ;(this.$refs['featureForm'] as Form).clearValidate()
    })
  }
  // 上传
  private featureUpload(val: any) {
    this.upload = val === 'true' ? true : false
    this.$nextTick(() => {
      ;(this.$refs['upload'] as Upload).clearFiles()
    })
  }
  private submitUpload() {
    if (this.fileList.length === 0) {
      this.$message.error('请选择上传文件！')
    }
    ;(this.$refs['upload'] as Upload).submit()
  }
  private uploadChange(file: any, fileList: any) {
    this.fileList = [fileList[fileList.length - 1]]
  }
  private handleRemove(file: any, fileList: any) {
    this.fileList = fileList
  }
  private uploadSuccess(res: any) {
    if (res.code === 0) {
      this.$message.success('上传成功！')
      this.upload = false
      this.getList()
    } else {
      // this.upload = false
      this.$message.error(res.msg)
      // this.$confirm(res.msg, '导入失败，请修改后重新操作', {
      //   confirmButtonText: '确定',
      //   showCancelButton: false,
      //   customClass: 'uploadMessage',
      //   type: 'error'
      // }).then()
      // this.getList()
    }
  }
  // 示例文件下载
  private downloadUrl() {
    window.location.href = this.downloadURL
  }
  // 勾选
  private handleSelectionChange(val: any) {
    this.downAll = false
    this.multipleSelection = val
  }
  private handleAll() {
    let multipleTable = this.$refs.multipleTable as Table
    this.tableData.forEach(row => {
      multipleTable.toggleRowSelection(row, true)
    })
    this.downAll = true
  }
  // 导出特征
  private async download() {
    this.downloadData = []
    if (this.multipleSelection.length === 0 && this.downAll === false) {
      this.$alert('请勾选需要导出的特征！', '提示', {
        confirmButtonText: '确定'
      })
      return false
    }
    if (this.downAll === true) {
      this.downloadData = []
    } else {
      this.multipleSelection.forEach((item: any) => {
        this.downloadData.push(item.feature_id)
      })
    }
    listDownload({ feature_ids: this.downloadData }).then((data: any) => {
      if (!data) {
        Message({
          message: '文件下载失败',
          type: 'error',
          duration: 5 * 1000
        })
        return
      }
      if (typeof window.navigator.msSaveBlob !== 'undefined') {
        window.navigator.msSaveBlob(new Blob([data as any]), '特征列表.xls')
      } else {
        let url = window.URL.createObjectURL(new Blob([data as any]))
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', '特征列表.xls')
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link) //下载完成移除元素
        window.URL.revokeObjectURL(url) //释放掉blob对象
      }
    })
    let multipleTable = this.$refs.multipleTable as Table
    this.downAll = false
    multipleTable.clearSelection()
  }
  // 试运行特征
  private async doTestFeature() {
    var _this = this
    // console.log(this.createdItem)
    this.isTesting = true
    this.createdItem.testResult = ''
    var parmArr: any = []
    this.paramsData.forEach((item: any) => {
      if (item.value !== '') {
        parmArr.push('{' + item.key + '}:' + item.value)
      }
    })
    this.createdItem.params = parmArr.join(',')
    if (this.createdItem.params === '') {
      this.$message.error('测试参数为空')
      this.isTesting = false
      return false
    }
    try {
      const { data } = await test(this.createdItem)
      this.createdItem.testResult = data.result
      this.$message.success('操作成功')
    } catch (error) {
      console.error(error)
    } finally {
      this.isTesting = false
    }
  }
}
</script>
<style lang="scss">
.sql-input {
  .el-textarea__inner {
    background: #5d5b5b;
    color: #fff !important;
  }
}
.code {
  width: 98%;
  max-height: 180px !important;
  overflow-y: scroll !important;
  .CodeMirror {
    // overflow-y: scroll !important;
    height: auto;
  }
}
.uploadMessage {
  padding: 0;
  .el-message-box__message {
    color: #00000099;
  }
  .el-message-box__btns {
    padding: 5px 15px 16px !important;
  }
}
</style>
<style lang="scss" scoped>
.selectionTitle {
  height: 30px;
  line-height: 30px;
  background: #1890ff3d;
  font-size: 12px;
  padding: 0px 16px;
  margin-bottom: 12px;
}
.titleColor {
  font-size: 12px;
  color: #1890ff;
}
.feature-out {
  padding: 20px;
}
.table-container {
  margin-bottom: 20px;
}
.form-table .label {
  text-align: right;
  line-height: 38px;
}
.sure {
  margin-top: 40px;
  display: inline-block;
  margin: 0 auto;
}
.filter-container {
  display: flex;
}
</style>
